<script setup lang="ts">
import { FormInstance, FormRules } from "element-plus";
import { defineProps, reactive, watch, ref, onMounted } from "vue";
import type { tasksFace } from "@/types/tasks";
import { cloneDeep } from "lodash";
import Wangeditor from "@/components/wangeditor/index.vue";
interface Props {
  show: boolean;
  groupData?: tasksFace;
}
const emit = defineEmits(["close", "submit"]);
const ruleFormRef = ref<FormInstance>();
const props = defineProps<Props>();
const rules = reactive<FormRules<tasksFace>>({
  taskName: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
  taskType: [{ required: true, message: "请输入任务编号", trigger: "blur" }],
});

let ruleForm = reactive<tasksFace>({
  id: 0,
  updateTime: "",
  isDel: 0,
  taskName: "",
  taskType: "",
  taskStatus: "",
  script: "",
  defaultLoading: 0
});
const close = () => {
  ruleFormRef?.value.resetFields();
  ruleForm = reactive<tasksFace>({
    id: 0,
    updateTime: "",
    isDel: 0,
    taskName: "",
    taskType: "",
    taskStatus: "",
    script: "",
    defaultLoading: 0
  });
  emit("close");
};
const changeText = (e) => {
  ruleForm.script = e;
};
const submit = async () => {
  const valid = await ruleFormRef?.value.validate();
  if (valid) {
    emit("submit", cloneDeep(ruleForm));
    close();
  }
};
watch(
  () => props.groupData,
  (v) => {
    if (!v) return;
    console.log(v.scriptText)
    ruleForm = reactive<tasksFace>(cloneDeep(v));
  }
);
onMounted(() => {});
</script>
<template>
  <el-drawer
    :model-value="props.show"
    :title="ruleForm.id ? '修改分类' : '添加分类'"
    @close="close"
    size="50%"
    :destroy-on-close="true"
  >
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="任务编号：" prop="taskType">
        <el-input v-model="ruleForm.taskType" placeholder="请输入任务编号" />
      </el-form-item>
      <el-form-item label="任务名称：" prop="taskName">
        <el-input v-model="ruleForm.taskName" placeholder="请输入任务名称" />
      </el-form-item>
      <el-form-item label="是否开启：" prop="taskStatus">
        <el-switch
          v-model="ruleForm.taskStatus"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <Wangeditor @change-text="changeText" :value-text="ruleForm.script"></Wangeditor>
    <template #footer>
      <el-button type="primary" @click="submit">确定</el-button>
      <el-button @click="close()">取消</el-button>
    </template>
  </el-drawer>
</template>
<style scoped lang="scss"></style>
